<div class="order-details-container" th:object="${order}">

    <div class="row">
        <div class="col-sm-3">
            <ul class="nav nav-pills nav-pills-icons nav-stacked" role="tablist">
                <li class="active">
                    <a th:href="'#summary-tab' + *{orderNumber}" role="tab" data-toggle="tab">
                        <i class="material-icons">shopping_cart</i>
                        <span th:utext="#{account.orders.order}">Order</span>
                    </a>
                </li>
                <li>
                    <a th:href="'#shipment-tab' + *{orderNumber}" role="tab" data-toggle="tab">
                        <i class="material-icons">local_shipping</i>
                        <span th:utext="#{account.orders.shipment}">Shipment</span>
                    </a>
                </li>
                <li>
                    <a th:href="'#payment-tab' + *{orderNumber}" role="tab" data-toggle="tab">
                        <i class="material-icons">credit_card</i>
                        <span th:utext="#{account.orders.payment}">Payment</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-sm-9 tab-content">

            <!-- Order summary -->
            <div th:id="'summary-tab' + *{orderNumber}" class="tab-pane active">
                <h6 th:utext="#{account.orders.items}">Items</h6>
                <table class="order-items">
                    <th:block th:each="orderItem : *{orderItems}" th:object="${orderItem}">
                        <tr>
                            <td th:utext="${orderItem.name} + ' x ' + ${orderItem.quantity}"></td>
                            <td class="price" blc:price="${orderItem.totalPrice}"></td>
                        </tr>
                        <tr th:object="${orderItem}"
                            th:if="${#lists.size(orderItem.orderItemPriceDetails)>=1} and ${#lists.size(orderItem.orderItemPriceDetails[0].orderItemPriceDetailAdjustments)>0}">
                            <td>
                                <div class="js-productOptions productOptions"
                                     th:replace="~{catalog/partials/offers :: orderDetails}"></div>
                            </td>
                            <td></td>
                        </tr>
                    </th:block>
                    <tr class="shipment-summary merchandise-total">
                        <td th:utext="#{account.orders.merchandiseTotal}">Merchandise Total:</td>
                        <td class="price" blc:price="${order.subTotal}"></td>
                    </tr>
                    <tr class="shipment-summary">
                        <td th:utext="#{account.orders.shippingTotal}">Shipping Total:</td>
                        <td class="price" blc:price="${order.totalShipping}"></td>
                    </tr>
                    <tr class="shipment-summary taxes">
                        <td th:utext="#{account.orders.taxes}">Taxes:</td>
                        <td class="price" blc:price="${order.totalTax}"></td>
                    </tr>
                    <tr class="grand-total">
                        <td th:utext="#{account.orders.grandTotal}">Grand Total:</td>
                        <td class="price" blc:price="${order.total}"></td>
                    </tr>
                </table>
            </div>

            <!-- Shipment -->
            <div th:id="'shipment-tab' + *{orderNumber}" class="tab-pane">
                <div th:each="fulfillmentGroup, iterStat : *{fulfillmentGroups}"
                     th:object="${fulfillmentGroup}" class="fulfillment-group">
                    <div th:unless="*{type?.type == 'GIFT_CARD' or type?.type == 'DIGITAL' or type?.type == 'PHYSICAL_PICKUP'}">
                        <h5 th:if="*{status}">
                            <span>Shipment status: </span> <!-- TODO: internationalize -->
                            <span th:utext="*{status}"></span>
                        </h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="shipping-information">
                                    <div class="fulfillment-group-address" th:inline="text">
                                        <h6 th:utext="#{account.orders.shippingAddress}">Shipping Address</h6>
                                        <address th:if="*{address.phonePrimary != null}">
                                            <th:block th:if="*{address.fullName}" th:utext="*{address.fullName}"/>
                                            <th:block th:unless="*{address.fullName}"
                                                      th:utext="*{address.firstName} + ' ' + *{address.lastName}"/><br/>
                                            [[*{address.phonePrimary.phoneNumber}]]<br/>
                                            [[*{address.addressLine1}]]<br/>
                                            [[*{address.addressLine2}]]<br
                                                th:if="!*{#strings.isEmpty(address.addressLine2)}"/>
                                            [[*{address.city}]],&nbsp;[[*{address.stateProvinceRegion}]]&nbsp;[[*{address.postalCode}]]<br/>
                                        </address>
                                        <address th:if="*{address.phonePrimary == null}">
                                            <th:block th:if="*{address.fullName}" th:utext="*{address.fullName}"/>
                                            <th:block th:unless="*{address.fullName}"
                                                      th:utext="*{address.firstName} + ' ' + *{address.lastName}"/><br/>
                                            [[*{address.addressLine1}]]<br/>
                                            [[*{address.addressLine2}]]<br
                                                th:if="!*{#strings.isEmpty(address.addressLine2)}"/>
                                            [[*{address.city}]],&nbsp;[[*{address.stateProvinceRegion}]]&nbsp;[[*{address.postalCode}]]<br/>
                                        </address>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="shipping-information">
                                    <div class="shipping-type">
                                        <h6 th:utext="#{account.orders.shippingSpeed}">Shipping Speed</h6>
                                        <div th:utext="*{fulfillmentOption.name} + ': ' + *{fulfillmentOption.longDescription}"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8 details-row">
                                <h6 th:utext="#{account.orders.items}">Order Items</h6>
                                <table class="order-items">
                                    <th:block
                                            th:each="fulfillmentGroupItem, iterStat : *{fulfillmentGroupItems}"
                                            th:object="${fulfillmentGroupItem}">
                                        <tr>
                                            <td th:utext="${fulfillmentGroupItem.orderItem.name} + ' x ' + ${fulfillmentGroupItem.quantity}"></td>
                                            <td></td>
                                        </tr>
                                    </th:block>

                                    <tr class="shipment-summary merchandise-total">
                                        <td th:utext="#{account.orders.shippingSubtotal}">Shipping Subtotal:
                                        </td>
                                        <td class="price" blc:price="*{shippingPrice}"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div th:id="'payment-tab' + *{orderNumber}" class="tab-pane">
                <div class="payment-information">
                    <div class="col-xs-12 payment-billing-method-container">
                        <th:block th:each="payment : ${order.payments}" th:object="${payment}">
                            <div class="row payment-billing-method" th:if="${payment.active}">
                                <div class="col-md-6 payment-details payment-method">
                                    <h6 th:utext="#{account.orders.paymentMethod}">Payment Method</h6>

                                    <th:block th:if="${payment.initialTransaction != null} and !*{#strings.isEmpty(initialTransaction.additionalFields['CARD_TYPE'])}">
                                        <th:block th:include="~{partials/creditCard :: read-only}"
                                                  th:with="cardType=*{initialTransaction.additionalFields['CARD_TYPE']},
                                                lastFour=*{initialTransaction.additionalFields['LAST_FOUR']},
                                                expDate=*{initialTransaction.additionalFields['EXP_DATE']}" />

                                        <div class="amount-paid">
                                            Amount paid: <span blc:price="*{amount}" ></span>
                                        </div>
                                    </th:block>

                                    <th:block th:if="${payment.authorizeTransaction != null} and !*{#strings.isEmpty(authorizeTransaction.additionalFields['CARD_TYPE'])}"
                                              th:unless="${payment.initialTransaction != null} and !*{#strings.isEmpty(initialTransaction.additionalFields['CARD_TYPE'])}">
                                        <th:block th:include="~{partials/creditCard :: read-only}"
                                                  th:with="cardType=*{authorizeTransaction.additionalFields['CARD_TYPE']},
                                                lastFour=*{authorizeTransaction.additionalFields['LAST_FOUR']},
                                                expDate=*{authorizeTransaction.additionalFields['EXP_DATE']}" />

                                        <div class="amount-paid">
                                            Amount paid: <span blc:price="*{amount}" ></span>
                                        </div>
                                    </th:block>
                                </div>
                                <div class="col-md-6" th:if="*{type.type == 'CREDIT_CARD'} and ${payment.initialTransaction != null}">
                                    <h6 th:utext="#{account.orders.billingAddress}">Billing Address</h6>
                                    <div th:if="*{billingAddress}">
                                        <th:block th:include="~{partials/simpleAddress :: read-only}" th:with="address=*{billingAddress}"/>
                                    </div>
                                    <div th:unless="*{billingAddress}">
                                        <p>The billing address is not listed.</p>
                                    </div>
                                </div>
                            </div>
                        </th:block>
                    </div>

                    <div class="col-xs-12">
                        <div class="row">
                            <h6 th:utext="#{account.orders.orderSummary}">Order Summary</h6>
                            <table class="order-summary">
                                <tr>
                                    <td th:utext="#{account.orders.subtotal}">Subtotal:</td>
                                    <td class="price" blc:price="*{subTotal}"></td>
                                </tr>
                                <tr th:unless="*{orderAdjustmentsValue.zero}">
                                    <td th:utext="#{account.orders.promotions}">Promotions:</td>
                                    <td class="discount price">(<span
                                            blc:price="*{orderAdjustmentsValue}"></span>)
                                    </td>
                                </tr>
                                <tr>
                                    <td th:utext="#{account.orders.shipping}">Shipping:</td>
                                    <td class="price" blc:price="*{totalShipping}"></td>
                                </tr>
                                <tr class="taxes">
                                    <td th:utext="#{account.orders.taxes}">Taxes:</td>
                                    <td class="price" blc:price="*{totalTax}"></td>
                                </tr>
                                <tr class="grand-total">
                                    <td th:utext="#{account.orders.grandTotal}">Grand Total:</td>
                                    <td class="price" blc:price="*{total}"></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

